<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" height="150" width="150"></canvas>
    <script>
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx = canvasId.getContext && canvasId.getContext("2d");
            // 使用Path2D对象进行绘制路径
            const rectAngle = new Path2D();
            // 矩形
            rectAngle.rect(10, 10, 50, 50);
            // 将创建的对象以参数的方式传递进去
            ctx.stroke(rectAngle);

            // 圆形
            const circle = new Path2D();
            // 将游标3移动到索要绘制的路径上
            circle.moveTo(125, 35);
            circle.arc(100, 35, 25, 0, Math.PI * 2);
            ctx.fill(circle);

        }
    </script>
</body>
</html>